<template>
  <div style="height: 100%; padding: 12px 12px 0">
    <el-container style="height: 100%">
      <el-aside width="220px" style="background-color: white; padding: 2px; margin-bottom: 0">
        <auth-project @selectBuilding="getCurrentProject" />
      </el-aside>
      <el-main style="padding: 0 0 0 20px">
        <el-form ref="queryForm" :model="queryParams" size="mini" inline>
          <el-form-item prop="floor">
            <el-input v-model.number="queryParams.floor" placeholder="请输入楼层" clearable />
          </el-form-item>
          <el-form-item prop="roomName">
            <el-input v-model="queryParams.roomName" placeholder="房间名称" clearable />
          </el-form-item>
          <el-form-item prop="checkUserName">
            <el-input v-model="queryParams.checkUserName" placeholder="验收人" clearable />
          </el-form-item>
          <el-form-item prop="checktypeId">
            <el-select v-model="queryParams.checktypeId" placeholder="请选择分部分项" clearable filterable @change="changeChecktype">
              <el-option v-for="item in checkTypeList" :key="item.fid" :label="`${item.fnumber} - ${item.fnameL2}`" :value="item.fid" />
            </el-select>
          </el-form-item>
          <el-form-item prop="checktableId">
            <el-select v-model="queryParams.checktableId" placeholder="请选择工序" clearable filterable style="width: 300px">
              <el-option v-for="item in checkTableList" :key="item.fid" :label="`${item.cfseq} - ${item.fnameL2}`" :value="item.fid" />
            </el-select>
          </el-form-item>
          <el-form-item prop="chkResult">
            <el-select v-model="queryParams.chkResult" placeholder="验收结果" multiple collapse-tags clearable filterable>
              <el-option v-for="item in checkResultList" :key="'checkResult' + item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item prop="beginDate">
            <el-date-picker v-model="queryParams.beginDate" value-format="yyyy-MM-dd" type="date" placeholder="整改期限从" />
          </el-form-item>
          <el-form-item prop="endDate">
            <el-date-picker v-model="queryParams.endDate" value-format="yyyy-MM-dd" type="date" placeholder="整改期限到" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="listLoading" :data="list" size="small" height="calc(100% - 160px)">
          <el-table-column label="验收结果" prop="projectName" align="center" width="100">
            <dict-tag slot-scope="{ row }" :options="checkResultList" :value="row.cfchkresult" />
          </el-table-column>
          <el-table-column label="项目名称" prop="cflastname" align="center" min-width="160" show-overflow-tooltip />
          <el-table-column label="楼栋" prop="buildingname" align="center" />
          <el-table-column label="楼层" prop="cffloor" align="center" />
          <el-table-column label="房间" prop="froompropno" align="center" />
          <el-table-column label="分项工程" prop="checktypename" align="center" min-width="120" show-overflow-tooltip />
          <el-table-column label="工序" prop="fname_l2" align="center" min-width="150" show-overflow-tooltip />
          <el-table-column label="问题类型" align="center" min-width="100">
            <dict-tag slot-scope="{ row }" :options="dict.type.problemProperty" :value="row.cfproblemproperty" />
          </el-table-column>
          <el-table-column label="验收人" prop="nick_name" align="center" />
          <el-table-column label="验收日期" align="center" width="100" :formatter="row => dateFmt(row.cfcheckdate)" />
          <el-table-column label="整改期限" align="center" width="100" :formatter="row => dateFmt(row.cfreformdate)" />
          <el-table-column label="上传时间" prop="uploadTime" align="center" width="150" />
          <el-table-column label="操作" align="center" width="80">
            <el-button slot-scope="{ row }" size="mini" type="text" icon="el-icon-edit" @click="showPrint(row)">查看</el-button>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
      </el-main>
    </el-container>

    <el-dialog :visible.sync="printState.visible" :close-on-click-modal="false" width="1000px" append-to-body>
      <div class="print-wrap">
        <el-button v-print="printConfig" plain type="primary" icon="el-icon-printer" size="mini" class="print-btn" :loading="printState.btnLoading">打印</el-button>
        <print-page id="print" v-loading="printState.loading" :print-obj="printState.printObj" show-pile-image />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import print from 'vue-print-nb'
import { checkResultData } from '@/utils/baseData'
import { rectifyList, listBeCheckResult, getCheckRecord } from '@/api/cqCheck'
import { listCheckType } from '@/api/qualityManage/checkType'
import { listCheckTable } from '@/api/qualityManage/checkTable'
import AuthProject from '@/views/qualityManage/components/AuthProject'
import PrintPage from './components/Print'
// 过滤未验收，值转为字符串
const checkResultList = JSON.parse(JSON.stringify(checkResultData.filter(i => i.value !== -1)))
checkResultList.map(i => (i.value = String(i.value)))

export default {
  name: 'CheckRecord',
  components: { AuthProject, PrintPage },
  directives: { print },
  dicts: ['problemProperty'],
  data() {
    return {
      checkResultList,
      listLoading: false,
      list: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        buildingId: '',
        floor: '',
        roomName: '',
        checkUserName: '',
        checktypeId: '',
        checktableId: '',
        chkResult: [],
        beginDate: '',
        endDate: ''
      },
      checkTypeList: [],
      checkTableList: [],
      currBuilding: {},
      printState: {
        visible: false,
        loading: false,
        btnLoading: false,
        printObj: {}
      },
      printConfig: {
        id: 'print',
        popTitle: '查看整改通知单-工程协同管理',
        beforeOpenCallback: () => (this.printState.btnLoading = true),
        openCallback: () => (this.printState.btnLoading = false),
        closeCallback: () => (this.printState.btnLoading = false)
      }
    }
  },
  created() {
    this.getCheckList()
    this.getCheckTableList()
  },
  methods: {
    async getCheckList() {
      // 分部分项
      const res = await listCheckType().catch(() => false)
      if (res === false) return
      this.checkTypeList = res.data
    },
    async getCheckTableList() {
      // 获取工序列表
      const res = await listCheckTable({ cfchecktypeid: this.queryParams.checktypeId }).catch(() => false)
      if (res === false) return
      this.checkTableList = res.data
    },
    changeChecktype() {
      this.queryParams.checktableId = ''
      this.getCheckTableList()
    },
    getCurrentProject(data) {
      this.currBuilding = data
      if (!data.id) return (this.list = [])
      this.queryParams.buildingId = data.id
      this.getList()
    },
    async getList() {
      const opt = { ...this.queryParams }
      if (!opt.buildingId) return this.$message.warning('请先选择楼栋')

      if (opt.chkResult?.length) opt.chkResult = opt.chkResult.join(',')

      const submitApi = this.currBuilding.buildingType ? listBeCheckResult : rectifyList
      this.listLoading = true
      const res = await submitApi(opt).catch(() => false)
      this.listLoading = false
      if (res === false) return

      this.list = res.rows
      this.total = res.total
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.buildingId = this.currBuilding.id
      this.handleQuery()
    },
    async showPrint(row) {
      const state = this.printState
      state.visible = true
      state.loading = true
      const res = await getCheckRecord({ id: row.fid }).catch(() => false)
      state.loading = false
      if (res === false) return
      state.printObj = res.data
    }
  }
}
</script>
<style lang="scss" scoped>
.print-wrap {
  height: 80vh;
  overflow: auto;
  position: relative;
  .print-btn {
    position: absolute;
    right: 20px;
  }
}
</style>
